<template>
	<view class="detail-head">
		<!-- 视频 -->
		<view class="head-video" v-if="detail.styleId == 'STYLE_VIDEO'"><video class="video" :src="detail.shortVideo" autoplay :show-fullscreen-btn="false"></video></view>
		<view class="head-video" v-else-if="detail.styleId.includes('STYLE_DATA_HUMAN') ||  detail.styleId == 'STYLE_DATA_HUMAN9'">
			<video class="video" :src="detail.dataHumanVideo" autoplay :show-fullscreen-btn="false"></video>
		</view>
		<!-- 传统名片 -->
		<template v-else-if="detail.styleId == 'STYLE_TRADITION' || detail.businessCardStyle == 1">
			<view class="head-tradition fboxWrap Xcenter" :style="{'background-image': 'url('+traditionList[pattern].bg+')'}">
				<!-- #ifndef MP-TOUTIAO -->
				<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="spaceHead"></view>
				<!-- #endif -->
				
				<swiper v-if="isMine && isPattern" class="swiper-tradition" circular :current="traditionIndex" @change="traditionChange" previous-margin="30rpx" next-margin="30rpx">
					<swiper-item class="fboxWrap Ycenter Xcenter" v-for="(item, index) in traditionList" :key="index">
						<CardTradition :isCode="false" :innerData="item" :detail="detail" :pattern="index+1" :barState="barState" @playAudio="playAudio" />
					</swiper-item>
				</swiper>
				<template v-else>
					<CardTradition :innerData="traditionList[pattern]" :detail="detail" :pattern="pattern" :barState="barState" @playAudio="playAudio" />
				</template>
			</view>
		</template>
		<!-- 个人形象 -->
		<!-- <view class="head-image" v-if="detail.styleId == 'STYLE_IMAGE'"> -->
		<template v-else>
			<view class="head-image" v-if="detail.imagePhotos && detail.imagePhotos.length">
				<swiper class="swiper-max" circular :current="swiperIndex" @change="swiperChange">
					<swiper-item v-for="(item, index) in detail.imagePhotos" :key="index">
						<image class="pic" :src="item" mode="aspectFill" @click="swiperPreview(detail.imagePhotos, index)"></image>
						<view class="del fboxRow Ycenter Xcenter" v-if="item != detail.imagePhoto && isAdd" @tap="delPic(index)"><u-icon name="close" color="#fff"></u-icon></view>
					</swiper-item>
				</swiper>
				<view class="swiper-min">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in detail.imagePhotos" :key="index" @click="picTap(index)">
							<image class="pic" mode="aspectFill" :class="{active: swiperIndex == index}" :src="item"></image>
						</view>
						<!-- <view class="add-pic" v-if="isAdd" @click="addPic">
							<image class="icon-add" src="https://ebc-prod.cdn.benwunet.com/uni-static/icon-add.png" mode="aspectFill"></image>
						</view> -->
					</u-scroll-list>
				</view>
			</view>
			<view class="head-image" v-else>
				<view class="swiper-max"><image class="pic" :src="detail.imagePhoto" mode="aspectFill" @click="swiperPreview([detail.imagePhoto], index)"></image></view>
			</view>
			<view class="image-audio bg-linear" @click="playAudio" v-if="detail.voiceType == 1 || detail.voiceType == 2">
				<!-- <image class="image-audio-bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img3.png" mode="aspectFill"></image> -->
				<view class="icon_box">
					<view class="bar bar1" :class="barState" id="bar0" style="height: 10rpx;"></view>
					<view class="bar bar2" :class="barState" id="bar1" style="height: 20rpx;"></view>
					<view class="bar bar3" :class="barState" id="bar2" style="height: 50rpx;"></view>
					<view class="bar bar4" :class="barState" id="bar3" style="height: 60rpx;"></view>
					<view class="bar bar5" :class="barState" id="bar4" style="height: 30rpx;"></view>
					<view class="bar bar6" :class="barState" id="bar5" style="height: 15rpx;"></view>
					
					
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import CardTradition from './card-tradition.vue'
export default {
	components: {CardTradition},
	props: {
		detail: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		isAdd: {
			type: Boolean,
			default: false
		},
		isMine: {
			type: Boolean,
			default: false
		},
		pattern: {
			type: [String, Number],
			default: '0'
		},
		isPattern: {
			type: Boolean,
			default: true
		},
		traditionList: {
			type: Array,
			defaul: () => {
				return [];
			}
		},
	},
	watch: {
		'detail.intelligenceVoiceUrl': {
			handler(val) {
				if (val) {
					this.$nextTick(() => {
						this.playAudio('first');
					});
				}
			},
			deep: true,
			immediate: true
		}
	},
	computed:{
		_pattern:{
			get(){
				return this.pattern
			},
			set(val) {
				this.$emit('update:pattern',val)
			}
		}
	},
	data() {
		return {
			statusBarHeight: getApp().globalData.statusBarHeight,
			isPlay: false,
			swiperIndex: 0,
			traditionIndex: 0,
			barState: '',
			Audio: null
		};
	},
	created() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		this.Audio = uni.createInnerAudioContext(this);
		if (!getApp().globalData.statusBarHeight) {
			const sys = uni.getSystemInfoSync();
			this.statusBarHeight = sys.statusBarHeight;
		}
		// #ifdef MP
		// 根据胶囊按钮距离， 设置导航高度
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		// #endif
	},
	destroyed(){
		console.log('destroyed')
		this.Audio.destroy()
	},
	methods: {
		traditionChange(e){
			this.traditionIndex = e.detail.current;
			// this._pattern = e.detail.current +1
			this._pattern = e.detail.current
		},
		swiperChange(e) {
			this.swiperIndex = e.detail.current;
		},
		picTap(index) {
			this.swiperIndex = index;
		},
		addPic() {
			this.$emit('addPic');
		},
		delPic(index) {
			this.swiperIndex = 0;
			this.$emit('delPic', index);
		},
		goPage(url) {
			if (url == 'qrcode') {
				this.$pageTo('/card/qrcode?memberId=' + this.detail.cardId);
			}
		},
		isAnimation(type) {
			if(type == 'paused'){
				this.barState = 'bar-paused'
			}else if(type == 'running'){
				this.barState = 'bar-running'
			}else{
				this.barState = ''
			}
		},
		playAudio(type) {
			const Audio =  this.Audio
			if (Audio) {
				// Audio.autoplay = true;
				const {intelligenceVoiceUrl, voiceUrl, voiceType} = this.detail
				Audio.muted = 'muted';
				const url = voiceType == 1 ? intelligenceVoiceUrl : voiceUrl; //音频地址
				console.log('音频地址', url)
				// 音频地址存在执行,不存在者删除音频方法
				if(url){
					Audio.src = url
					// Audio.play(); //执行播放
					if (this.isPlay) {
						Audio.pause();
						this.isAnimation('paused');
						this.isPlay = false;
					} else {
						if (type != 'first') {
							Audio.play();
							Audio.onPlay(() => {
								this.isAnimation('running');
								this.isPlay = true;
							});
						}
					}
				}else{
					Audio.destroy()
				}
				Audio.onError(res => {
					console.log('onError', res);
				});
				Audio.onPause(res => {
					console.log('end');
					this.isAnimation('paused');
					this.isPlay = false;
				});
			}
		},
		callPhone(){
			// #ifdef MP
			uni.makePhoneCall({ phoneNumber: this.detail.mobile });
			// #endif
		},
		goMap(){
			// #ifdef MP
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					uni.openLocation({
						latitude: this.detail.latitude,
						longitude: this.detail.longitude,
						success: function() {}
					});
				}
			});
			// #endif
		},
		swiperPreview(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
				// longPressActions: {
				// 	itemList: ['发送给朋友', '保存图片', '收藏'],
				// 	success: function(data) {
				// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 	},
				// 	fail: function(err) {
				// 		console.log(err.errMsg);
				// 	}
				// }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-head {position: relative;}
.head-image {position: relative;}
.swiper-max {position: relative;width: 750rpx;height: 750rpx;}
.swiper-max .pic {width: 750rpx;height: 750rpx;}
.swiper-min {position: absolute;bottom: 30rpx;left: 0;padding: 0 30rpx;}
.swiper-min .pic {margin-right: 12rpx;width: 54rpx;height: 54rpx;border-radius: 8rpx;border: 1rpx solid transparent;}
.swiper-min .active {border-color: var(--selectedFontColor);}
.head-image .icon-add {width: 56rpx;height: 56rpx;}
.head-video .video {width: 750rpx;height: 750rpx;}
.del {position: absolute;right: 30rpx;top: 30rpx;width: 38rpx;height: 38rpx;overflow: hidden;border-radius: 50%;background-color: red;}
.lh32 {line-height: 32rpx;}
.swiper-tradition{position: relative;width: 750rpx;height: 360rpx;}

// 传统名片
// .head-tradition {position: relative;padding: 120rpx 40rpx 40rpx;}
//background-size: 750rpx 600rpx;
.head-tradition {position: relative;padding: 30rpx 0 40rpx;color: #FFF9F3;touch-action: none;background: no-repeat top center/cover;}

.image-audio {
	position: absolute;
	bottom: -56rpx;
	left: 50%;
	margin-left: -56rpx;
	width: 112rpx;
	height: 112rpx;
	border-radius: 50%;
	overflow: hidden;
}
.icon_box {
	height: 112rpx;
	width: 70rpx;
	position: absolute;
	top: 0;
	left: 30rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	.bar {
		width: 6rpx;
		border-radius: 6rpx;
		background-color: #fff;
		// background-color: var(--contentBgImageTitleColor);
		margin-right: 5rpx;
		animation: equalize 4s 0s infinite;
		animation-play-state: paused;
	}
	.bar-paused{animation-play-state: paused;}
	.bar-running{animation-play-state: running;}
}

.demo {
	width: 50px;
	height: 50px;
	background-color: #ccc;
}
.image-audio-bg {
	width: 112rpx;
	height: 112rpx;
}
.icon_box .bar1 { animation-delay: -1.9s;}
.icon_box .bar2 {animation-delay: -2s;}
.icon_box .bar3 {animation-delay: -2.3s;}
.icon_box .bar4 {animation-delay: -2.4s;}
.icon_box .bar5 {animation-delay: -2.1s;}
.icon_box .bar6 {animation-delay: -2.7s;}
@keyframes equalize {
	0% {
		height: 60rpx;
	}
	4% {
		height: 50rpx;
	}
	8% {
		height: 40rpx;
	}
	12% {
		height: 30rpx;
	}
	16% {
		height: 20rpx;
	}
	20% {
		height: 30rpx;
	}
	24% {
		height: 40rpx;
	}
	28% {
		height: 10rpx;
	}
	32% {
		height: 40rpx;
	}
	36% {
		height: 30rpx;
	}
	40% {
		height: 20rpx;
	}
	44% {
		height: 40rpx;
	}
	48% {
		height: 10rpx;
	}
	52% {
		height: 30rpx;
	}
	56% {
		height: 40rpx;
	}
	60% {
		height: 30rpx;
	}
	64% {
		height: 60rpx;
	}
	68% {
		height: 20rpx;
	}
	72% {
		height: 50rpx;
	}
	76% {
		height: 10rpx;
	}
	80% {
		height: 20rpx;
	}
	84% {
		height: 60rpx;
	}
	88% {
		height: 50rpx;
	}
	92% {
		height: 60rpx;
	}
	96% {
		height: 20rpx;
	}
	100% {
		height: 30rpx;
	}
}

// [data-pattern='0'],[data-pattern='1'],[data-pattern='4']{
// 	.head-tradition{background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-head.png') no-repeat top center/cover;}
// }
// [data-pattern='2'],[data-pattern='5']{
// 	.head-tradition{background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-head-2.png') no-repeat top center/cover;}
// }
// [data-pattern='3'],[data-pattern='6']{
// 	.head-tradition{background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/bg-head-3.png') no-repeat top center/cover;}
// }
</style>
